<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2019/8/21
  Time: 10:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>药品后台管理系统</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

    <script src="layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <%--<script id="switchTpl" type="text/html">
       &lt;%&ndash; {{#  if(d.isImport === 0){ }}
        <span style="color: #F581B1;">进口{{  }}</span>
        {{# } else if(d.isImport=== 1) { }}
        <span style="color: #01AAED;">非进口{{  }}</span>
        {{#  } }}&ndash;%&gt;
        <input type="checkbox" name="isImport" value="{{d.isImport}}" lay-skin="switch" lay-text="进口|非进口" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>

    </script>--%>
    <script type="text/html" id="switchTpl1">
        {{#  if(d.saleStatus === 0){ }}
        <span style="color: #00FF00;">正常销售{{  }}</span>
        {{# } else if(d.saleStatus=== 1) { }}
        <span style="color: #FD482C;">停售{{  }}</span>
        {{#  } }}
    </script>
    <script type="text/javascript">

        layui.use('table',function () {
            var table=layui.table;
            var form=layui.form;
            //第一个示例
            table.render({
                elem:"#myTable",//一般都是写id选择器
                url:"selectDrugByPage",//数据接口，请求地址
                page: true,//开启分页,

                toolbar:"#myToolbar",//id选择器的写法

                limit:10,
                limits:[10,20,30,40,50],
                title:"后台列表",
                //列
                cols:[[
                    {type:"checkbox"},
                    {title:"药品编号",field:"id",sort:true, align: 'center'},
                    {title:"药品名字",field:"name", align: 'center'},
                    {title:"药品规格",field:"spec", align: 'center'},
                    {title:"药品单位",field:"unit",sort:true, align: 'center'},
                    {title:"生产企业",field:"productCompany",sort:true, align: 'center'},
                    {title:"生产日期",field:"productDate",sort:true, align: 'center'},
                    {title:"保质期至",field:"okDate", align: 'center'},
                    {title:"进价",field:"importPrice",sort:true, align: 'center'},
                    {title:"零售价",field:"price",sort:true, align: 'center'},
                    {title:"药品状态",field:"saleStatus",sort:true, align: 'center', templet: '#switchTpl1'},
                    {title:"是否进口",field:"isImport",sort:true, align: 'center', templet: '#switchTpl', unresize: true},
                    {title:"产品说明",field:"description", align: 'center'},
                    {title:"操作",templet:"#caoZuo"}
                ]]
            });
            form.on('switch(sexDemo)', function(obj){
                layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                $.ajax({
                    url:"updateSaleStatus",

                })
            });
        });

        layui.use(["form","layer","table"],function (){
            var form=layui.form;
            var layer = layui.layer;
            var table = layui.table;

            form.on("submit(add)",function (data) {
                //console.log(data);
                $.ajax({
                    url:"insert",
                    data:data.field,
                    type:"post",
                    success:function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll();
                        //2.添加提示成功
                        if(data.isInsert){
                            layer.alert("添加成功",{time:1500});
                        }else{
                            layer.alert("添加失败",{time:1500});
                        }
                        //3.刷新表单
                        table.reload("myTable");
                    }
                });
                return false;//阻止跳转；
            })
            form.on("submit(update)",function (data) {
                //console.log(data);
                $.ajax({
                    url:"update",
                    data:data.field,
                    type:"post",
                    success:function (data) {
                        //console.log(data)
                        //1.关闭掉添加弹出层
                        layer.closeAll();
                        //2.添加提示成功
                        if(data.isUpdate){
                            layer.alert("更新成功",{time:1500});
                        }else{
                            layer.alert("更新失败",{time:1500});
                        }
                        //3.刷新表单
                        table.reload("myTable");
                    }
                });
                return false;//阻止跳转；
            })
        })
        function toOpenUpdateLayer(departmentId) {
            //alert(stuId)
            //1.获取当前行数据===》发送ajax请求，获取当前行数据
            $.ajax({
                url:"selectOne",
                data:"departmentId="+departmentId,
                success:function(data){
                    $("#departmentId").val(data.departmentId);
                    $("#name").val(data.departmentName);
                    $("#departmentTel").val(data.departmentTel);
                    $("#departmentArea").val(data.departmentArea);
                }
            })
            $("#addSubmitBtn").hide();
            $("#updateSubmitBtn").show();
            //2.把数据填充到修改弹出层中==>弹出层显示
            layui.use('layer',function () {
                layer.open({
                    title:"修改学生信息",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                })
            })
            //3.提交表单

            //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table
        }
        function toOpenAddLayer() {
            $("#departmentId").val(0);
            $("#updateSubmitBtn").hide();
            $("#addSubmitBtn").show();
            layui.use('layer',function () {
                layer.open({
                    title:"添加部门相关信息",
                    content:$("#addForm"),
                    type:1,
                    maxmin:true
                });
            });
        }
        //搜索操作
        function doSearch() {
            /*1.获取输入框输入的内容*/
            var departmentName=jQuery("#departmentName").val();
            //alert("stuName");
            /*发送请求，并且接收数据*/
            layui.use('table',function () {
                var table=layui.table;
                table.reload('myTable',{
                    where:{"name":departmentName}
                });
            });
        }
        //移除的ajax请求
        function doRemove(departmentId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'],function () {
                var table=layui.table;
                layer.confirm('确定删除？',{icon: 3, title:'确认删除'},function (index) {
                    $.ajax({
                        url:"remove",
                        data:"departmentId="+departmentId,
                        success:function (data) {
                            layer.alert(data.isRemove,{time:1000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    });
                })
            });

        }
        function doMultiRemove() {
            //获取到选中的内容的id===》table模块中找方法
            layui.use(['layer','table'],function () {
                var table=layui.table;
                //获取到选中的数据
                var checkStatus=table.checkStatus('myTable')//idTest 即为基础参数 id 对应的值
                //console.log(checkStatus.data) //获取选中行的数据
                var data=checkStatus.data;
                if(data.length==0){
                    layer.alert("请添加要删除的内容");
                }else{
                    layer.confirm("确定要删除所选择的数据吗？",function (index) {
                        //把所有选中的数据的id封装到一个数组中
                        var ids=new Array(data.length);
                        for(var i=0;i<ids.length;i++){
                            ids[i]=data[i].departmentId;
                        }

                        //执行删除操作
                        $.ajax({
                            url:"multiDelete",
                            data:"ids="+ids,
                            success:function (data) {
                                layer.close(index);
                                layer.alert(data.isMultiDelete,{time:1000});
                                table.reload("myTable");
                            }
                        })
                    })
                }
            })
        }
    </script>
    <script id="caoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.departmentId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" onclick="doRemove('{{d.departmentId}}')">删除</button>
    </script>
</head>
<body>
    <table id="myTable"></table>

    <div id="myToolbar" style="display: none;">
        <button type="button" class="layui-btn layui-btn-radius" onclick="toOpenAddLayer()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
        <button type="button" class="layui-btn  layui-btn-radius layui-btn-danger" onclick="doMultiRemove()">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
        <div class="layui-inline">
            <label class="layui-form-label">药品信息管理</label>
            <div class="layui-input-inline" style="width: 230px;">
                <input type="text" class="layui-input" id="departmentName">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="doSearch()">
                    <i class="layui-icon layui-icon-search"></i> 搜索
                </button>
            </div>
        </div>
    </div>
    <form id="addForm" style="display: none" class="layui-form" >
        <div class="layui-form-item">
            <label class="layui-form-label">部门编号</label>
            <div class="layui-input-block">
                <input name="departmentId" id="departmentId" class="layui-input" value="0" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input name="departmentName" id="name" class="layui-input" placeholder="请输入部门名称" <%--lay-verify="required|stuName"--%>>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门电话</label>
            <div class="layui-input-block">
                <input name="departmentTel" id="departmentTel" class="layui-input" placeholder="请输入部门电话">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门区域</label>
            <div class="layui-input-block">
                <input name="departmentArea" id="departmentArea" class="layui-input" placeholder="请输入部门区域">
            </div>
        </div>
        <div class="layui-form-item">
            <button lay-submit type="button" lay-filter="add" class="layui-btn" id="addSubmitBtn">添加部门信息</button>
            <button lay-submit type="button" lay-filter="update" class="layui-btn" id="updateSubmitBtn">修改部门信息</button>

            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</body>
</html>
